<template>
	<view class="law-list pageBg">
		<view v-for="(article, index) in articleList" :key="index" class="law-item"
			@click="navigateToIndex(article.articleId)">
			<image class="law-image" :src="getImageUrl(article.extraParsed.hierarchy)" mode="aspectFill"></image>
			<!-- <image class="law-image" src="../../common/images/law.webp" mode="aspectFill"></image> -->
			<view class="law-info">
				<text class="law-title">{{ article.articleTitle}}</text>
				<view class="law-attributes">
					<text class="law-author"> {{article.extraParsed.organ}} </text>
					<text class="law-date"> {{article.extraParsed.date}}</text>
					<text class="law-summary"> {{article.extraParsed.hierarchy}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
		onReachBottom,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"

	import {
		apiGetArticleList,
	} from "@/api/apis.js"
	import {
		gotoHome
	} from "@/utils/common.js"

	const queryParam = {
		pageNum: 1,
		pageSize: 12
	}
	const loading = ref(false)
	const noData = ref(false)
	let pageName
	//比外面的代码晚执行
	onLoad((e) => {
		let {
			id = null, name = '必知条款', type = null
		} = e;
		if (type) queryParam.type = type
		if (id) queryParam.classid = id

		// if(!id) gotoHome()

		uni.setNavigationBarTitle({
			title: name
		})

		pageName = name
		getArticleList()
	})

	// 离开的时候就释放资源:缓存/定时器
	onUnload(() => {
		uni.removeStorageSync('storearticleList')
	})

	onReachBottom(() => {
		if (noData.value) return
		queryParam.pageNum++
		getArticleList()
	})

	const articleList = ref([])

	const getArticleList = async () => {
		loading.value = true

		let res = await apiGetArticleList(queryParam)
		const list = res.data.list.map(article => {
			try {
				article.extraParsed = JSON.parse(article.extra || '{}');
			} catch (error) {
				console.error('Failed to parse extra field:', article.extra, error);
				article.extraParsed = {};
			}
			return article;
		});

		articleList.value = [...articleList.value, ...list];

		if (queryParam.pageSize > res.data.length) {
			noData.value = true
		}
		loading.value = false
		uni.setStorageSync('storearticleList', articleList.value)
	}

	//比onLoad先执行，获取不到query参数
	// getArticleList()

	const getImageUrl = (hierarchy) => {
		switch (hierarchy) {
			case '法律':
				return 'https://riddle.miyucaicai.cn/law.webp';
			case '地方法规':
				return 'https://riddle.miyucaicai.cn/tiaoli.webp';
			case '行政法规':
				return 'https://riddle.miyucaicai.cn/tiaoli.webp';
			case '法释':
				return 'https://riddle.miyucaicai.cn/fashi.webp';
			default:
				return 'https://riddle.miyucaicai.cn/more.jpg'; // 默认图片
		}
	}

	//分享给好友
	onShareAppMessage((e) => {
		console.log(e)
		return {
			title: '职场冲冲-',
			path: '/pages/laws/laws'
		}
	})

	// 转发到朋友圈，注意key是query，只用带参数
	onShareTimeline(() => {
		return {
			title: '职场冲冲 ',
			// query: 'id=' + queryParam.classid + '&name=' + pageName
		}
	})

	const navigateToIndex = (id) => {
		uni.navigateTo({
			url: '/pages/notice/detail?articleId=' + id
		});
	};
</script>

<style scoped lang="scss">
	.law-list {
		display: flex;
		flex-direction: column;


		.law-item {
			display: flex;
			flex-direction: row;
			margin-bottom: 10rpx;

			padding: 10rpx;
			background-color: #fff;
			border-radius: 8rpx;
			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);


			.law-image {
				width: 125rpx;
				height: 125rpx;
				border-radius: 8rpx;
				margin-bottom: 8rpx;
			}

			.law-info {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				margin-left: 20rpx;
				width: calc(100% - 125rpx);
				height: 125rpx;
				padding: 0 5rpx;

				/* 固定高度 */
				.law-title {
					font-size: 31rpx;
					font-weight: bold;
					color: #333;
					flex: 2;
				}

				.law-attributes {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-end;
					flex: 1;

					.law-author,
					.law-date,
					.law-summary {
						font-size: 25rpx;
						color: #666;
						margin-top: 5rpx;
					}

					.law-author {
						color: #555;
					}

					.law-date {
						color: #999;
					}

					.law-summary {
						color: #777;
					}
				}
			}

		}


	}
</style>